<template>
  <div class="detail-section">
    <div class="header">
      <h2>{{title}}</h2>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="footer">
      <div class="more">
        <span>{{footerText}}</span>
        <van-icon name="arrow"></van-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import {  } from 'vue'
defineProps({
  title: {
    type: String,
    default: () => "默认标题"
  },
  footerText:{
    type: String,
    default: () => "查看全部"
  }
})
</script>

<style lang='less' scoped>
.detail-section{
  padding: 0 15px;
  border-top: 5px solid #f2f3f4;
  .header{
    h2{
      margin: 10px;
    }
  }
  .footer{
    display: flex;
    justify-content: flex-end;
    padding: 5px;
    color: var(--primary-color);
  }
}
</style>